<template>
  <div>
    <div
      v-if="
        nowRouteName == 'page404' ||
        nowRouteName == 'movieitem' ||
        nowRouteName == 'citylist' ||
        nowRouteName == 'login'
      "
    ></div>
    <footer v-else>
      <nav class="footer1">
        <router-link to="/movie"
          ><span class="iconfont icon-dianying"></span
          ><span>电影/影院</span></router-link
        >
        <router-link to="/video"
          ><span class="iconfont icon-shipin"></span
          ><span>视频</span></router-link
        >
        <router-link to="/shortvideo"
          ><span class="iconfont icon-shipin1"></span
          ><span>小视频</span></router-link
        >
        <router-link to="/show"
          ><span class="iconfont icon-yanchu-xianxing2-0"></span
          ><span>演出</span></router-link
        >
        <router-link to="/me"
          ><span class="iconfont icon-wo"></span><span>我的</span></router-link
        >
      </nav>
    </footer>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  data() {
    return { nowRouteName: "" };
  },
  watch: {
    $route() {
      console.log(this.$route);
      this.nowRouteName = this.$route.name;
      console.log(this.nowRouteName);
    },
  },
};
</script>

<style lang="less" scoped>
nav a {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  margin: 5px 0;
  text-decoration: none;
}
nav a.router-link-exact-active {
  color: #f03d37;
}
.footer1 {
  display: flex;
  justify-content: space-around;
  text-align: center;
  height: 1.3067rem;
  width: 100%;
  background: #fff;
  border-top: 0.0533rem solid #ccc;
  position: fixed;
  bottom: -2px;
}
.footer1 .iconfont {
  font-size: 25px;
}
&.router-link-exact-active {
  color: #f03d37;
}
</style>
